<!--
 * @Description: 可拖拽窗口；默认使用
 * @Author: zhailei
 * @Date: 2021-01-19 13:44:39
 * @LastEditTime: 2021-08-03 12:02:29
 * 
 * @FilePath: \vite-demoe:\wwwroot\Vue\\-cloud-vue\src\components\TopVUI\custom\DragerModal\TModal.vue
-->
<template>
  <a-modal
    ref="modal"
    v-dialogDrag:{dialogDrag}="dialogDrag"
    :class="getClass(modalClass)"
    :style="getStyle(modalStyle)"
    :visible="visible"
    v-bind="_attrs"
    v-on="_listeners"
    :maskClosable="maskClosable"
    :cancelText="$ct(cancelLangCode, cancelText)"
    :okText="$ct(confirmLangCode, okText)"
    :footer="footer"
    :centered="centered"
    :closable="closable"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <slot></slot>
    <template v-if="!isNoTitle" slot="title">
      <a-row class="t-modal-title-" type="flex">
        <a-col class="left">
          <div v-if="titleTag" class="title-tag"></div>
          <a-icon
            v-if="titleIcon"
            :type="titleIcon"
            :style="{ marginRight: '5px' }"
          />{{ title }}
        </a-col>
        <a-col
          v-if="switchFullscreen"
          class="right fullscreenBox"
          :class="[fullscreen ? 'fullscreen' : '', 'right']"
        >
          <a-button
            class="ant-modal-close ant-modal-close-x"
            ghost
            type="link"
            :icon="fullscreenButtonIcon"
          />
        </a-col>
        <a-col
          v-if="!switchFullscreen && fullscreen"
          class="fullscreen fullscreenBox"
          style="display: none;"
        ></a-col>
      </a-row>
    </template>

    <template slot="footer">
      <a-button
        key="back"
        @click="handleCancel"
        :icon="cancelBtnIcon ? cancelBtnIcon : ''"
      >
        {{ $ct(cancelLangCode, cancelText) }}
      </a-button>
      <a-button
        key="submit"
        type="primary"
        :loading="confirmLoading"
        @click="handleOk"
        :icon="confirmBtnIcon ? confirmBtnIcon : ''"
      >
        {{ $ct(confirmLangCode, okText) }}
      </a-button>
    </template>

    <!-- 处理 scopedSlots -->
    <template v-for="slotName of scopedSlotsKeys" :slot="slotName">
      <slot :name="slotName"></slot>
    </template>

    <!-- 处理 slots -->
    <template v-for="slotName of slotsKeys" v-slot:[slotName]>
      <slot :name="slotName"></slot>
    </template>
  </a-modal>
</template>

<script>
import { mapState } from "vuex";
import { getClass, getStyle } from "@/utils/props-util";
import { triggerWindowResizeEvent } from "@/utils/util";
export default {
  name: "TModal",
  props: {
    title: String,
    // 可使用 .sync 修饰符
    visible: Boolean,
    // 是否全屏弹窗，当全屏时无论如何都会禁止 body 滚动。可使用 .sync 修饰符
    fullscreen: {
      type: Boolean,
      default: false,
    },
    // 是否允许切换全屏（允许后右上角会出现一个按钮）
    switchFullscreen: {
      type: Boolean,
      default: false,
    },
    // 点击确定按钮的时候是否关闭弹窗
    // okClose: {
    //   type: Boolean,
    //   default: true,
    // },
    // 可拖拽
    dialogDrag: {
      type: Boolean,
      default: true,
    },
    cancelText: {
      type: String,
      default: "取消",
    },
    okText: {
      type: String,
      default: "确定",
    },
    // 点击蒙层是否允许关闭
    maskClosable: {
      type: Boolean,
      default: false,
    },
    // 垂直居中
    centered: {
      type: Boolean,
      default: true,
    },
    // 标题图标
    titleIcon: {
      type: String,
    },
    // 确定按钮加载状态
    confirmLoading: {
      type: Boolean,
    },
    // 确定按钮图标
    confirmBtnIcon: {
      type: String,
    },
    // 取消按钮图标
    cancelBtnIcon: {
      type: String,
    },
    // 是否显示页脚
    footer: {
      type: String || Object,
    },
    // 是否显示右上角关闭按钮
    closable: {
      type: Boolean,
      default: true,
    },
    // 确认按钮语言编码
    confirmLangCode: {
      type: String,
      default: "confirm",
    },
    // 取消按钮语言编码
    cancelLangCode: {
      type: String,
      default: "cancel",
    },
    // 标题左侧标签
    titleTag: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // 内部使用的 slots ，不再处理
      usedSlots: ["title"],
      // 实际控制是否全屏的参数
      innerFullscreen: this.fullscreen,
    };
  },
  computed: {
    ...mapState("setting", ["isMobile"]),
    // 一些未处理的参数或特殊处理的参数绑定到 t-modal 上
    _attrs() {
      let attrs = { ...this.$attrs };
      // 如果全屏就将宽度设为 100%
      if (this.innerFullscreen) {
        attrs["width"] = "100%";
      }
      return attrs;
    },
    modalClass() {
      return {
        "t-modal-box": true,
        fullscreen: this.innerFullscreen,
        "no-title": this.isNoTitle,
        "no-footer": this.isNoFooter,
        mobile: this.isMobile,
      };
    },
    modalStyle() {
      let style = {};
      // 如果全屏就将top设为 0
      if (this.innerFullscreen) {
        style["top"] = "0";
      }
      return style;
    },
    isNoTitle() {
      return this.title && this.allSlotsKeys.includes("title");
    },
    isNoFooter() {
      return this._attrs["footer"] === null;
    },
    slotsKeys() {
      return Object.keys(this.$slots).filter(
        (key) => !this.usedSlots.includes(key)
      );
    },
    scopedSlotsKeys() {
      return Object.keys(this.$scopedSlots).filter(
        (key) => !this.usedSlots.includes(key)
      );
    },
    allSlotsKeys() {
      return this.slotsKeys.concat(this.scopedSlotsKeys);
    },
    // 切换全屏的按钮图标
    fullscreenButtonIcon() {
      return this.innerFullscreen ? "fullscreen-exit" : "fullscreen";
    },
    _listeners() {
      let listeners = { ...this.$listeners };
      delete listeners["ok"];
      delete listeners["cancel"];
      return listeners;
    },
  },
  watch: {
    visible() {
      if (this.visible) {
        this.innerFullscreen = this.fullscreen;
      }
    },
    innerFullscreen(val) {
      this.$emit("update:fullscreen", val);
    },
  },
  destroyed() {
    // console.log('destroyed')
  },
  methods: {
    getClass(clazz) {
      return { ...getClass(this), ...clazz };
    },
    getStyle(style) {
      return { ...getStyle(this), ...style };
    },
    close() {
      this.$emit("update:visible", false);
    },
    handleOk(e) {
      // if (this.okClose) {
      this.close();
      // }
      this.$emit("ok", e);
    },
    handleCancel(e) {
      this.close();
      this.$emit("cancel", e);
    },
    /** 切换全屏 */
    toggleFullscreen() {
      this.innerFullscreen = !this.innerFullscreen;
    },
  },
};
</script>

<style lang="less" scoped="scoped">
@primary-color: @primary-color;
.t-modal-box {
  .t-modal-title- {
    .right {
      width: 56px;
      position: inherit;
      .ant-modal-close {
        right: 56px;
        color: rgba(0, 0, 0, 0.45);

        &:hover {
          color: rgba(0, 0, 0, 0.75);
        }
      }
    }
  }
}

@media (max-width: 767px) {
  .t-modal-box.fullscreen {
    margin: 0;
    max-width: 100vw;
  }
}

.title-tag {
  background-color: @primary-color;
  height: 17px;
  width: 5px;
  display: inline-block;
  margin: 0 8px -3px -13px;
}
</style>
